victory-pie

What is victory-pie?

The victory-pie npm package is a part of the Victory library, which provides a set of modular charting components for React. Specifically, victory-pie is used to create pie and donut charts with a variety of customizable options.

What are victory-pie's main functionalities?

Basic Pie Chart

This code demonstrates how to create a basic pie chart using the victory-pie package. The data prop is used to pass the data to the VictoryPie component.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const BasicPieChart = () => (
  <VictoryPie data={data} />
);

export default BasicPieChart;

Donut Chart

This code demonstrates how to create a donut chart by setting the innerRadius prop on the VictoryPie component.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const DonutChart = () => (
  <VictoryPie data={data} innerRadius={100} />
);

export default DonutChart;

Custom Colors

This code demonstrates how to customize the colors of the pie chart slices using the colorScale prop.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const CustomColorsPieChart = () => (
  <VictoryPie data={data} colorScale={['tomato', 'orange', 'gold']} />
);

export default CustomColorsPieChart;

Labels

This code demonstrates how to add custom labels to the pie chart slices using the labels prop.

import React from 'react';
import { VictoryPie } from 'victory-pie';

const data = [
  { x: 'Cats', y: 35 },
  { x: 'Dogs', y: 40 },
  { x: 'Birds', y: 25 }
];

const LabeledPieChart = () => (
  <VictoryPie data={data} labels={({ datum }) => `${datum.x}: ${datum.y}%`} />
);

export default LabeledPieChart;

Other packages similar to victory-pie

recharts

Recharts is a composable charting library built on React components. It provides a variety of chart types, including pie charts, and is known for its simplicity and ease of use. Compared to victory-pie, Recharts offers a broader range of chart types and more extensive documentation.

nivo

Nivo provides a rich set of dataviz components, built on top of D3 and React. It offers highly customizable and responsive charts, including pie charts. Nivo is known for its beautiful default themes and extensive customization options, making it a strong alternative to victory-pie.

react-chartjs-2

React-chartjs-2 is a React wrapper for Chart.js, a popular JavaScript charting library. It supports a wide range of chart types, including pie charts, and is known for its performance and ease of integration. Compared to victory-pie, react-chartjs-2 leverages the powerful Chart.js library, providing a different set of customization options and performance characteristics.

README

VictoryPie

VictoryPie draws an SVG pie or donut chart with React. Styles and data can be customized by passing in your own values as properties to the component.

API Documentation

Detailed documentation and interactive examples can be found at http://formidable.com/open-source/victory/docs/victory-pie.

Issues

To make it easier to manage issues across all of Victory, we have disabled issues for this repo. Please open issues in the main victory repo instead. You can track our progress on issues here

Development

# Run the demo app server
$ npm start

# Open the demo app
$ open http://localhost:3000

# Run tests
$ npm test

For more on the development environment, see DEVELOPMENT in the project builder archetype.

Contributing

Please review our Code of Conduct before contributing.

For a detailed contribution guide, please see CONTRIBUTING in the project builder archetype.

IMPORTANT

This project is in a pre-release state. We're hard at work fixing bugs and improving the API. Be prepared for breaking changes!

Caveats git installs using npm 2 may fail in postinstall. If you are consuming Victory via git installs please use npm >=3.0.0